<template>
  <div class="register-container">
    <h2>注册</h2>
    <form @submit.prevent="registerUser">
      <div class="form-group">
        <label for="username">用户名</label>
        <input type="text" id="username" v-model="username" required>
      </div>
      <div class="form-group">
        <label for="email">邮箱</label>
        <input type="email" id="email" v-model="email" required>
      </div>
      <div class="form-group">
        <label for="password">密码</label>
        <input type="password" id="password" v-model="password" required>
      </div>
      <button type="submit">注册</button>
      <div v-if="error">{{ error }}</div>
    </form>
    <p>已有账号？<a href="#" @click="switchToLogin">点击登录</a></p>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      username: '',
      email: '',
      password: '',
      error: ''
    }
  },
  methods: {
    registerUser () {
      axios.post('/users/register', {
        username: this.username,
        email: this.email,
        password: this.password
      })
        .then(() => {
          // 注册成功后的处理
        })
        .catch(error => {
          this.error = error.response.data.message || '注册失败，请重试'
        })
    },
    switchToLogin () {
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.register-container {
  max-width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"],
input[type="password"] {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button {
  padding: 10px 20px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style>
